<template>
  <div>
    <n-data-table
      :columns="columns"
      :data="data"
      :pagination="pagination"
      v-model:checked-row-keys="checkedRowKeysRef"
    />
    <n-space justify="center">
      <n-button type="primary" @click="onSave">确认选择</n-button>
    </n-space>
  </div>
</template>
<script setup lang="ts">
  import { getColumn } from '@/api/column/column';
  import { DataTableRowKey } from 'naive-ui';
  import { onMounted, ref } from 'vue';

  const data = ref<RowData[]>([]);
  const pagination = ref<any>({ pageSize: 10 });
  const checkedRowKeysRef = ref<DataTableRowKey[]>([]);

  interface RowData {
    id: number;
    key: number;
    name: string;
  }

  const getData = async () => {
    const response: any = await getColumn({});
    response.data.forEach((e: RowData) => {
      e.key = e.id;
    });
    data.value = await response.data;
  };

  const emit = defineEmits(['onSelectColumn']);
  const onSave = async () => {
    let res: any = [];
    checkedRowKeysRef.value.forEach((e: number) => {
      data.value.forEach((element: RowData) => {
        if (element.id == e) {
          res = element;
        }
      });
    });
    emit('onSelectColumn', res);
  };

  const columns = [
    {
      type: 'selection',
      multiple: false,
    },
    {
      title: '微页面名称',
      key: 'title',
    },
  ];

  onMounted(() => {
    getData();
  });
</script>
